بسم الله الرحمن الرحيم 


اللهم صلي على محمد وعلى آل محمد 
كما صليت على إبراهيم وعلى آل إبراهيم إنك حميد مجيد 
وبارك على محمد وعلی آل محمد كما 


باركت على إبراهيم وعلى آل إبراهيم انك حميد مجيد 


عن ابي هريرة عن النبي -صلي الله عليه وسلم قال : 


من كتم علما يعلمه جاء يوم القيامة ملجما بلجام من نار 


لمراسلتی ... یمکنكم مراسات الميل التا 


Nany215eg @hotmail.com 
leaderegs @ hotmail.com 
nany2leg @yahoo.com 
hnn.work @ gmail.com 


تم الاستعانة ببعض المواقع التعليمية لاعداد هذة المادة العلمية 


الفهرس 


الدرس الاول : مقدمة عن لغ Iآ HTML‏ 


الدرس الثانى : لنبدا 


الدرس الثالث : تغيير مستويات الكتابة 


الدرس الرابع : الالوان 


الدرس الخامس : التعامل مع النصوص 


الدرس السادس : الفقرات والقوائم 


الدرس السابع : الصور 


الدرس الثامن : الوصلات التشعبية 


الدرس التاسع : الجمداول 


الدرس العاشرٍ : اللنماذج 


لماذا نستخدم في الأساس XH M1‏ أو [ML‏ ګ ؟ ما فائدتهما ؟ 

نستخدمها لتحويل العبارات و النصوص التي نكتبها لعبارات و نصوص مفهومة من قبل 
المتصفح الذي نتصفح به الإنترنت › بحيث نخبر المتصفح مثلاً بأن الخط الذي نكتب به هو خط 
n2‏ 0طهاأو أن الخط 14هط أو أن الخط مائل › أو أننا انتقلنا إلى سطر جديد › كل هذه الأمور 
التي لم نكن نكترث لها عند كتابتنا بالوورد يجب أن نلتفت لها عندما نريد أن نصنع صفحة 


العناصر الفارغة ؟! ما هي ؟ 

العناصر الفارغة في ۲۲11 أو ۲1× هي التي لا يظهر تأثيرها على نص محدد أو 
صورة محددة › كمثال › عندما نقول أننا نريد سطرآجديداً › السطر الجديد لا ينفذ على نص 
معين فلذلك نسمیه عنصر فارغ و یکتب بال 1M‏ 1ک <إط> أما بال M1‏ 1 ]فهو مشابهە 
للآخر إلا أن به بعض الإختلاف وھو یکتب کہ</ > 


١‏ لغة آل ا11۷ هى من اسهل اللغات التى تستخدم لعمل صفحات الانترنت 


۲. ال HTML‏ ھی اختصار ن Hyper text mark-up language‏ وهی تعنی لغة الترميز 
المتشعية 


۳ لكي ترى ۳1۷1 لأي صفحة انترنت تزور ها عليك أن تضغط على قائمة عرض "س۷1" ثم المصدر ”ع٤ا‏ uاه؟S"‏ 


HTML يجب التعلم بعض المصطلحات التى سوف نستخدمها عند كتابة الكود الخاص بال‎ .٤ 


بعض مصطلحات لغ HTMI Û‏ 


Tag -1‏ 
التاج وتظهر کمایلی < > ویسمی ڇھ1 
هى كلمه تعبير عن اوامر ال 11۷1 الموجودة داخل الاقواس اى ان الامر يتم كتابتة داخل الاقواس 
السابقة الاشار لها كما يلى : 
<P>‏ 
سوف یتم شرح جمیع الاوامر لاحقا ان شاء الله 
Container tags -2‏ 
هى التاجس التى يتطلب ان يتم فتحة لاداء امر معين وبعد الانتهاء من كتابة الامر يتم اغلاقه اى انه زوج 


من التاج كما فى المثال التالى : 
<B> name </B>‏ 


عند فتح التاج يكتب <8> وعند غلقه يكتب <8/> 


Empty tags-3 


ای انه تاج لا یحتاج الى ان يغلق مثل <آر]> فهو تاج لا يحتاج الى اغلاق 


<LI> 


سوف يتم شرح جميع الاوامر لاحقا ان شاء الله 


Inter prater-4 


Capital ABC ---- Small abc-5 


عند كتابة التاج لا يوجد اختلاف اذا تم كتابته باحرف ا1ء او باحرف [هاiمca‏ 


6- يوجد ثلاثة مصطلحات فى غاية الاهمية وهما وسوف يتم فهمهم اكثر من 
خلال التدريب العملى 


Element‏ للامر 
Attribute‏ الخاصیه 


ما۷ القيمة 


سوف نقوم بشرحهم الان ان شاء الله كما يلى : 


التاج ممكن ان يحتوى على تثلاثة عناصر ٠:‏ 
١‏ - هو يعطى الامر الاساسى للتاج element‏ -1 
مٿل ع]طھ) ---- ۴0٤ ---- tite‏ سوف يتم فهمه اكثر من خلال الامثلة 


مثلا الامر <اوه۴> 


2- هو يحدد الخصائص التى سوف تظهر على هذا الامر 
الخاصية Attribute‏ 


<Font Color="fed"> مڌ‎ 


Attribute 
الخاصية التى سوف نقوم بتغيرها‎ 


value القيمة‎ 3 


هى قيمة الخاصية (attribute)‏ 


<Font Color=" red" > 


٠ 


Elemen attribute Value 


وبهذا نكون قد انتهينا من بعض المصطلحات الهامة للغة H TMI‏ 


يتم كتابة اوامر ال ۳1M‏ فى اى محرر نصى بسيط مثل ال لهمء)ه" والذى يمكن ان 
تجدة فى قائمة ابداء " ۲ء " ثم فى قائمة البرامج "8۲41٥إم‏ " تم " Accessories‏ "كما ھو 
موضح بالشكل التالى : 

Start--- program --- accessories --- Notepad 


E Game: 
Ej E Irteraetual 

E arc Softears 

ê Microsoft office Tools 


0 ۳ 
Toro Nobepad 

E mam 4.0 WY Part 

8 Network Azzociates F j j Program Conpatibiikmy Wizard Notepad 


El Mcrosoit FrorkPage + Î J sretranze 

El nir asoft Ward Ff O Tou iridoms 3F 

J Zable - 

Bc : ny Eric Ff OF Windoms Eplbrer 
i Interac Paar î Sartu + j Gl dome ioe Heker 
| CPs N SirFtat IE 


El BlazeDyD 


Û Irkemet Euplarer 
E] mieresort Outlook 


rwe we r Fr r 


E dûa Fhoboshag Pamarta 2.0 
E Ahdebe Reade 0ة‎ 

5 Irternal Explofar 

METRES Hot 

E Fkrosolt Haltvesync 
Microsolt Excel 


WÊ MN Explorer 


اويمكن كتابة اوامر ال ]1١M]_‏ فى اى محرر نصى بسيط مثل ال لمعه" بالضغط 
RZ‏ بالفارة واختیار الامر New‏ ثم ext Document‏ آکما هو موضح بالشکل 


Text Document 


والان سوف نقوم بانشاء اول صفحة باستخدام ال HTML‏ وذلك بکتابة 
الاوامر التاليه داخل ملف ال Notepad‏ الذى تم انشاءة 


<html> 
<head> 

<title> GOMAN <(/title> 
<body> welcome </body> 
</head> 
</ html > 


أول شيء عليك فعله هو أن ت تخبر المتصفح بأنك " ستتحد ث" معه بلغة H[ML‏ ودلك بان تکتب 
داخل محرر النص > <html‏ ثم تغلق هذا الکود کما یلی <اہصاط /> 


الشيء التالي الذي تحتاجه صفحتاک هو أمر راس الصفحة "head"‏ والذی يقدم معلومات عن 
الصفحة للمتصفحة لذلك يتم كتابتة كما يلى <لهعط >وايضة يتم اغلاقة كما يلى <لهعط /> 


ايضا تحتاج الى تسميتة صفحتك التى سوف تقوم بانشائها لذلك تحتاج الى الامر title>‏ < 
واغلاقة ايضا كما يلى <ع[ازاً /< وسيكون اسم صفحتك هنا بم GOMAN‏ 


ايضا تحتاج الى امر ”رلهط “والذي سيحوي المحتويات التى تريد ان تضعة داخل الصفحة 
وبالتالی یکتب کما یلی <رل0ط>تم يتم اغلاقة <رلەط /> 


: کما یلی فتح واغلاق الامر‎ 
<html> 
<head> 
<title> GOMAN <(/title> <— 
<body> welcome </body> <“ 
</head> 
</ html> 


بعد ان تقوم بكتابة الاوامر السابقة داخل صفحة ال pî Notepad‏ بحفظ الملف بامتدا د 
“ اہاط.“ کما هو موضح بالشكل التالى 


E New Text Document - Notepad E أ‎ 
File Edit Format Yiew Help 


zhtml= 

xheadz 

4TItle> GOMAN 4TITtIez 
<body» welcome <body 
<f hears 

4# html x= 


بعد کتابة الامر یتم یتم حفظ الملف بامتداد 1م)ط. كما بالشکل التالی 


1 


awe Ir: ET اق أ‎ FF E7 EHH 


2 


My Recent 
Documents 


Desktop 


يتم حفظ الملف بامتداد إ]ر)ط. N‏ 
ر 
اا My Documerits‏ 
Pag.html‏ 


My Lomputer 


File farms: |pan.html |‏ رھ 
2 سے لے 
ا My Metwark. SãYE ãš lypê: Tent Documents [tat]‏ 


Encoding: | A4RS| 


ملحوظة هامة 


فی لغة ال ]۷[ ] ليس هناك اى اختلاف اذا ما كتب الاوامر اه)ام هع او 
1هو فيمكن كتبة الاوامر السابقة باى من الاشكال التالية : 


<html> <HTML> 

<head> <HEAD> 

<title> GOMAN <f/title> <TITLE> GOMAN </TITLE> 
<body> welcome </body> او‎ <BODY> welcome </ BODY > 
</head> </ HEAD > 


</ html > ` <IHTML> 


وعند الضغط على مء نكون انشائنا اول صفحة 


File Edit Yiew Favorites Tools Help iy 

€ Bark ” 3 0 e Search E Folders ER 

Address | D:10 ا‎ 0 
File and Folder Tasks ق 1 م‎ i Document 


1 KE 
9 Make a new Folder 


+0 Publish this Folder ta the 
Web 


E Share this Folder 


اول صفحة تم انشائها فى موقعك 


Other Places 


a Abeer (D:)} 
ك‎ My Documents 
| Shared Dacurmênts 


4 My Lormputer 
ن‎ MY Network Plates 


Details 


Tink. > fS 5 wi... <| f Mieros,.. 1€ Adobe... E ا ص‎ 723 


نقوم بفتح الصفحة السابقة ونجد ما يلى : 


نقوم بفتح الصفحة السابقة ونجد ما يلى : 


60MA N‏ کما تم كتابتة فى الاوامر 


السابقة 


Ê GOMAN - Microsoft Inter net Explorer 


ES 
Fill Edt Yiew Favorites Tools Help iy 
e 9 ا‎ ۳ f و‎ Search e Favorites 4 @- 2 | 7” اسا‎ e 2 


Address E D:101pag, html vIEDc Uns * 
E > | Search WEB, 7 i E " 


MIE: $° W-0 a. 


= 


wElcorne 


3 Done 


Fly _ompukter‏ ل 


~- f Micros... 1f Adobe... E او کک ب ع‎ 


ملحوظة هامة 
يوجد مجموعة من التاج يجب كتابتها فى كل صفحة وهى 


<html > <Head> <Title> 


يطلق علیها اسم ها tue‏ uآاtء‏ اى هيكل الصفحة 


0 + + 


ويجب مرعاة الترتيب عند الكتابه 


غب . يات الكتابة ۴ » م التاج لالت : 


<H1> this 1s the first line </H1> 
<H2> thıs 1s the second line </H2> 
<H3>th1s 1s the third line </H3> 


ويتم تغير مستويات الكتابة من المستوى الاول وحتى المستوى السادس 


<H1> to <H6> 
: يتم كتابة الكود فى صفحة ال لهمع)ه" السابق انشائها كما هو موضح بالشكل‎ 


ملاحظة هامة 
لفتح صفحة ال لهمء)هN‏ من داخل متصفحك من قائمة source -- ¡eW‏ 


Î E pag - Notepad 
File Edit Format Yiew Help 


<htmlz= 

<head> 

4TiLle> GOMAN <fTIt lez 
shoddy 


2HL= this is5 the first line <#HI= 


2HA= this is the second line <#Ha>= 
4H3>this 1= the third line <FH3= 
2# BOY 

4 heads 


الاوامر الجديدة التى تمت اضافتها <html>‏ 


بكتابة الاوامر السابقة داخل ال إهمع]هN‏ يظهر لنا بهذا الشكل فى متصفحك : 


Ê GOMAN - Microsoft Internet Explorer E8 | 
File Edt Wie Favorites Tools Help 


:0 1 ا > x‏ ض Bac! 2 5 E 0 a Search lf Favorkes 6 r7‏ ج 


Address (¥ Dri0ipag. html | Es Link 2 


ˆ | Search web... ا‎ I > @ >-> # -@ @ - î > 


this Is the first line 


this is the second line 


this is the third line 


n My Cormplukter 


ملاحظة هامة 


لفتح صفحة ال لمعه من داخل متصفحك View — source‏ 


ملاحظة هامة 
لاظهار تاثیر ای امر جدید ينم اضافتة داخل ملف اأ_ Notepad‏ ینم الضغط 


علی مفتاح طیءع۲]ء‌R‏ الموجود بشریط ال ٤ہ‏ م)tںuط standard‏ فى 


متصفحك كما هو موضح بالشكل التالى : 


File Edit Yim Favorites Tools Help î 


5 2 ê 2 Search < Favorites 2 2 + چ‎ x > س‎ Zl اة‎ 3 


Adress 3 D:{Oipag.html ا‎ E 30 Links *F 

fy) 7 | Searchwebr, ص‎ 7 EE z= Pp > mM - @ 2 . 3 ٍِ 
1 پک‎ 

welcorr 

welcom 


یتم الضغط على زرار Refresh‏ 
لتنشيط الصفحة واظهار تاثير الامر 


welcoın الذى تم ادخالة‎ 
welcoIn 
welcom 
welcom 
Welcome in my site 8 
#]bone 8 ly Loamputer 5 
ملاحظة هامة‎ 


فى لغة ال 1ص)1 ليس هناك اى اختلاف اذا ما كتبت الاوامر إاهازمة٣‏ او 


كتبت 11ء اى باحرف كبيرة او باحرف صغيرة فمتلا يمكن كتابة الامر 
كما ڀذأى <H1> this is the first line </H#1>‏ 

<H2> thıs 1s the second line </H2> 

<H3>thıs 1s the third line </H3> 


<h1> this is the first line </h1> او کتابة كما لى‎ 
<h2> this 1s the second line </h2> 
<h3>this 1s the third line </h3> 


لتحديد لون الخلفية لصفحتك سوف نستخدم خاصية B6 ٤٥C0 1O0‏ اما FFFFF۴F‏ فھی القیمة 
التى تمثل اللون المختار وهو اللون الابيض مع ملاحظة انها تكتب بين علامتى تنصيص " " او 
0 وهى القيمة التى تمثل اللون الاسود او اضافة اى من قيم الالوان المختلفة مثلا 
۸65 # ويلاحظ يتم اضافتة العلامة التالية # قبل كتابة اللون سوف اضيف شكل يوضح 
القيم المختلفة لبعض الالوان كما يلى : 


Antiquewhite Aliceblııe‏ | ر 
FFAEBDT F#FFOFBFFE‏ 
Beigê Azure‏ 
FFSFSDC FFOFFFF‏ 


Bisque 


Blanchedalmond 
#FFFEBCD #ODONOOND #FFEACA 


Lornsilk 
#FFFSBDC 


ملاحظة : لمعرفة القيم للالوان المختلفة يمكن من الرابط التالى : 
http://www.w3schools.com/html/html_colors.asp‏ 


نعود مرة ثانية لتغير لون الخلفية كما سبق وان قلنا يتم استخدام خاصية 86٣00۴‏ ويتب 
الامر التالى : 


لجعل الخلفية بالون الاحمر يكتب الامر التا 


لجعل الخلفية بالون الازرق يتم اضافة الامر التا 


<body BGCOLOR="000OFF"> 


لجعل الخلفية بالون البيج (ويتم معرفة قيمتة من اللوحة الموجودة اعلى ) ويكتب الامر التالى : 
مع ملاحظة انة يتم اضافة العالمة التالية قبل كتابة قيمتة اللون # 


< "body BGCOLOR="#FSFSDC> 
ا‎ | n : وهو موضح بالشكل التالى‎ 


paf - ie لك‎ EK) 


File Edit Format Yim Help 


hrm l= 
heads 
4LitleE=> GOMAN 4#TITIa= 


<bhoORy BSCDLOR="#FSFSDZ" x 
2# body z 


الامر الجديد الذى تم اضافتة لتغير لون headz‏ 4# 
HEMI‏ 2 


الخلفية للون البيج 


وبعد اضافتة الامر يضهر متصفحك كما يلى باللون البيج : 


J GOMAN - Microsoft Internet Explorer 


Fils Edt Yiew Favorites Tools Help س‎ 
س‎ Bar! چ‎ 5 E 2 search SF Favorites ا‎ ¬ x 2 ۳ 1ء‎ ۹ 

Address 1# D10 pag.htrnl | a0 Linke * 
î > | Searthweb,.. ا 1 1 م‎ E @ - i > 


this is the first line 


this is the second line 


this is the third line 


My Lompukter‏ ل 


الدرس الخامس : التعامل مع النصوص 
للتحكم فى الخطوط يستخدم التاج التالى : 


<Font> ......... </Font> 


ر اک ى بم اش اقرط كالم ر لون و وع الط فاه تن الخف ا ال 
مرف ت رھ ن ا کان 

# لتغير نوع الخط 
لتحديد نوع الخط يستخدم الخاصية ع٠٥۴۵‏ حيث نستطيع تغير نوع الخط من بين الانواع 
nllختlفة‏ ك gl Simplified Arabic gl Tahoma yl Times New Roman‏ 


e gl Vladimir Script 


ویکتب الامر کما یلی : 


<font face="Times New Roman"> 
Welcome in my sit I hope to show all contain in my site 


</font> 


ويكتب الامر داخل ملف ال لممءاهN‏ كما يلى : 


E pag _ Notepad EEK 
Fil Edit Format Yiew Help 


IE 
hears 
4TItleE> GOMAN <7TIt lez 


font fFace="Times Mew Roman" z 

welzom in my sit 1 hope to show all contain in my site 
4# TONE 

4FFONTE 

2# BORyz 


<Fheandz 
AES 


2 
| 


1۔ یتم فتح التاج <امرم]> تم يتم اغلاقة_<امہ؟/> 
2-یتم ںا ستخدام الخاصية face‏ أتغبر نوع الخط والخط ا١‏ : لمستخدہ فی المثال 
السابJق‏ ھyى Times New Roman‏ 


3 يكتب الخط بين علامتين تنصيص " " 


Sess se SONE 


يتم اغلاق التاج 


<font face=''Times New Roma 


الخاصية عع لتغير 
نوع الخط 


ملاحظة هامة ویتم الضغط لئ زارا طوعإRef‏ داخل متصفحكت لاظهار تاثير الامر 
الجديد 


Î GOMAN - Microsoft Internet Explorer 
File Edit Yiew Favorites Tools Help 


3 ا اس + % 7 2 3 a Search TF Favorites‏ ۵ ۳ 5 ار ا 
EES 0‏ 
E) < | Search web... 7 7 E 7 FP 2 7 0 @ ۹ & 38‏ 


welcora ii tay sit i hope to show all contain ii ty site 


My Campuker‏ إ2 


ع# لتغير لون الخط 


يستخدم لتغير لون الخط الخاصية C٠10١‏ وذلك بنفس مبادى تحديد الالوان كما سبق وشرحنا 


<font color="0000ff"'> 
Welcome 1n my sit I hope to show all contain in my site 


</font> 


وهنا يظهر لون الخط باللون الازرق فى متصفحك كما يلى 


وهنا يظهر لون الخط باللون الازرق فى متصفحك كما يلى 


Î GOMAN - Microsoft Internet Explorer 


File Edit Yiew Favorites Tools Help 


CE ° ا‎ 2 0 r Search ê Favorites € > س‎ 


3 a & ` ل تا‎ 
Address #] D:10\pag.html اا‎ Ea 
f > | Searchweb, ع‎ 1 I > @ >-> #4 -@ @ - 


welcorn n rmy sit 1 hope to show all conta mM my site 


لون الخط باللون الازرق كما هو ظاهر 


2 MY Loampukter 


التعرف عليها ويكتب الامر التالى 


<font size=" 3" > 
welcome in my website 


. <lfont> 


حجم الخط رقم 1 و س wrelc ott‏ 

حجم الخط رقم 2 م welcom‏ 

خجم الخظ رق ۹ ى welom‏ 

حجم الخط رقم 4 و welco‏ 
حجم الخط رقم 5 و welcom x‏ 
حجم الخط رقم 6 ت welcom‏ 
حجمالخطرقہ 7 welcoMm ıı,‏ 


الاسلوب الثانى وهو اسلوب نسبى حيث تكتب الاحجام من 1 الى 6 ولكن يصحبها علامة + 


الاسلوب الثانى وهو اسلوب نسبى حيث تكتب الاحجام من 1 الى 6 ولكن يصحبها علامة + 


لتكبير الحجم او علامة - لتصغير الحجم کھا لے : 


خط نحم -3 
خط نحم -2 
خط یححم -]1 
خط بحجم +0 إاو -0 وهو الافشراضى) 
خط ر بحجم +1 
خط بحجه +2 
خط بحجد +3 
» 
چ 1 
OT‏ 
خص لححد 
ټ أ 
ط 3 
حط لحجد 
أ 


لاحظ أنه حتى فى الأسلوب النسبى لا نستطيع الحصول على لكش من سبعة أحجام للخطوط. 


ویکتب الامر کفا لی : 


| <font size =" +3 " > 
Welcome in my site 


</ Font > 


ملاحظة هامة 


یمکن تغير حجم ولون ونوع الخط معا فی امر واحد کمایلى : 


<font face ="Times New Roman" color = " OOOOff " size =" 4" > 
Welcome in my site 


</font> 


مثال عملي 


مثلا سوف اقوم بكتابة نص داخل صفحتى باللون الاحمر وبنوع خط اسمة " 810811١‏ " وبحجم 
"4 ” لعمل ذلك يكتب الاوامر التالية داخل ملف النود باد كما يلى : 


<font face=" SiımSun " color= " ffOOOO " size=" 4 " > 


Welcome to Welcom Software - Building business software solutions for 
over 30 years Increase your revenues, reduce your costs and enable more 
informed management decision-making with Welcom Software solutions. 
Welcom Software has over 30 years experience 1n creating bespoke 
business software solutions to help companies build better, more effective 
businesses. Our expert consultants will work with you in-house to 
evaluate your existing software capabilities and create a unique solution 
to streamline your business processes and help you work more efficiently 


</font> 


لمشاهدة تاثير الكود تقوم بفتح متصفحك والضغط على مفتاح Refresh‏ فیظھر متصفحك کما 
یلی : 


Ê GOMAN - Microsoft Inter net Explorer 


Fil Edit View Favorites Tools Help 
اوا‎ Back ( $ 5 2 ۵ و‎ J Search f Favorites 3 @- 1 2 س‎ kl 4 

Address | #Dolpag.html أ‎ Go Liiks 
i <> | Search web... a E7 ® °` Y-`-O O 7 


Welcome to Welcom Software - Euildins business software solutions for over 3Û years 
Increase Yor revenues, reduce your costs and enable more inforned management 
decision makine with Welcom Software solutions. Welcom Software has over 3Û yTears 
ezperience in creatins bespoke business software solutions to help companies build 
better, more effective businesses. Uur expert consultants will work with you in7” 
house to evaluate Four existing software capabilities and create a umique solution 
| to streamline your business processes and help ¥ou work more efficient ly 


3 Done 4 My Lormputer 


یزال موضوح الدرس الرابع هو التعامل مع النصوص وسنکمل ان شاءِ الله 


لعمل فقرة جديدة داخل متصفحك 


للبدء فى كتابة اى فقرة جديدة داخل متصفحك تقوم بكتابة الكود التالى : 


<p> 
Welcome 1n my site these’s the first time I building new sIt 


</p> 


فمثلا لو ارد اضافة فقرة اخرة داخل متصفحى بعد التعديل السابق سوف يتم كتابة 
الاأوامر التالية: 


<font face=" SimSun " color= " ffOOOO " size=" 4 " > 

Welcome to Welcom Software - Building business software solutions for 
over 30 years Increase your revenues, reduce your costs and enable more 
informed management decision-making with Welcom Software solutions. 


</font> 


امر اضافة فقرة جديدة <p>‏ 


business software solutions to help companies build better, more effective 
businesses. Our expert consultants will work with you in-house to 
evaluate your existing software capabilities and create a unique solution 
to streamline your business processes and help you work more efficiently 


اغلاق امر اضافة فقرة جديدة </p>‏ 


بعد اضافة الامر السابق نقوم بفتح متصفحی وتنشيطة فيظهر لنا بهذا الشكل 


Î GOMAN - Microsoft Inter net Explorer CFE 
Fil Edit Yiew Favorites Tools Help i 
O sa ج‎ 5 ۳ ۵ 2 Search f Favorites 3 @- Fk >” س‎ e 4 
ûddress ##] Dı\Dipag.htrl ا‎ Go Liiks 


Welcomes to Welcom Software - Euildinse business software solutions for over 3Û years 
Increase Yor revenlês, reduce your costs and enable more informed management 
decision makine with Welcom Software solutions. Welcom Software has over 3Û years 
ezperience in creatins bespoke business software solutions to help companies build 
better, more effective businesses. Uur expert consultants will work with you in7 
house to evaluate yor existing software capabilities and create a ıumique solution 


to streamline ¥or business processes and help Fou work more efficient ly 


business software solutions to help companies build better, more sffect ive 
businesses. ur expert consultants will work with you inhouse to evaluate Tour 
| ezsisting software capabilities and create a unique solution to streamline Four 
| business processes and help Tou work more efficient lr 


نلاحظ تم اضافة فقرة جديدة داخر المتصفح 


3 Dane 3 Hy Lormputer 


لجل الفرة يمين أو يسار او قى الرس 


لجعل الفقرة يمين او يسار او فى الوسط يستخدم خاصية Align‏ گا لے 


لجعل الفقرة يمين يكتب الامر التالى | 


<P Align=" right" > 


Welcom 


</P> 


لجعل الفقرة يسار يكتب الامر التالى 


<P Align=" left" > 
Welcom 


</P> 


لجعل الفقرة فى الوسط 


<P Align=" center" > 
Welcom 


</P> 


# للبدء على سطر جديد 
للبدء فى الكتابة على سطر جديد داخل المتصفح يستخدم الامر التالى وهو امر يتم فتحة 
ولا یتم اغلاقة فھو وعھ) رامص ٤‏ کما سبق وتم شرحة فی الدرس الاول ای لا یلزم 


اغلاقة . هذا اللامر يعمل بمثابة مفتاح enter‏ من لوحة المفاتيح فمثلا لو ارد كتابة جزء 
من النص السابق على سطر جدید فیكون كما يلى : 

<font face=" SimSun " color= " ffOOOO " size=" 4 " > 

Welcome to Welcom Software - <br>Building business software 

solutions for over 30 years Increase your revenues, <br>reduce your costs 

and enable more informed management decision-making with Welcom 


Software solutions. 


</font> 
نلاحظ اننا اضفنا امر الحbط> مرتين فيظهر لنا فى المستعرض كما لو كانت الفقرة‎ 
E 


Welcome to Welcom Software — 

Building business software solutions for over 30 years Increase your 
revenues, 

reduce your costs and enable more informed management decision- 
making with Welcom Software solutions. 


کیا کو مو کے اکن ال 


TB GOMAN - Microsoft Internet Explorer 
Fil Edit View Favorites Tools Help My 


@Q sax @ 5 ۳ ۵ 2 Search lp Favorites 2 ا‎ I + س‎ kl 8 


Address E] D:{Olpag. html I Ea irks > 
N E-* ® °> ¥ ۰O 8-> Gh > 


gf 7 | Search web... ر‎ 


Welcome to Welcom Software = 

Building business software solutions for over 3Û years Increase Tor rêvenlês, 
redıcêe Tor costs and enable more informed manasement decision-making with Welcom 
Software solutions 


3 Doane | | | 4 My Laormputer 


# التنسيقات والتاثيرات 
تاتے الان عل اتقات راترات آئئے سكن اضاا غل اانص و ص وففا ل 


لامر لاا ا 


الخط الغامق ( الاسود العريض )(ل1ه8 


لجعل النص بخط اسود عريض (8014) يستخدم الامر التالى : 


<B> welcome </B> 


وبكتابة الامر السابق داخل ملف ال لهمع†هN‏ كما يلى : 


1 E pag - Notepad 
File Edit Format Wie Help 


APNE 
heads 
2 Boaciyz 
2TItlEe> OMAN <fTIt laz 


Bz 


wa | came 


2# Bz 


2# body 


+#headz 
2F htmlz 


وفتح المستعرض يظهر النص كما يلى 


3 GOMAN - Microsoft Internet Explorer CEK 
Fils Edit Yiew Favorites Tools Help 7 


e 1‏ ا 7 x‏ خ a7‏ ا Search < Favourites‏ ر 0 2 ا 3 Back‏ س 


des #Jpa0pagttml O Ee ms 
TIE E CET ECE 2 


ITT 


Welcome 


3 Doane ل‎ My Larmpuiker 
ملحوظه هامة‎ 


يمكن استخدام تاج ال < ع )5> بدلا من تاج ال <8 > لجعل الخط سميك 


الخط المائل عإام)] 


لكتابة النص بخط مائل يكتب الامر التالى : 


<IÎÞ> welcome </I> 


ويكتب فى ال لهaمع)هN"‏ كما يلى : 


1 E pag - Hotepad - 8&8 
File Edit Format Wie Help 


sheadz 
2# Botiyz 
LIL le> GOMAN <TIT lez 


<> 


we [come 


</Þ 
a bodys 


2# headz= 
2 htmls= 


ويظهر تاثير الامر فى المستعرض كما يلى : 


ويظهر تاثير الامر فى المستعرض كما يلى : 


A GOMAN - Microsoft Internet Explorer 


Fil Edit View Favorites Tools Help 


i EA 3‏ اا 7 FE a a Search Gp Favorites ¢ a x‏ ا + Bark‏ ج 
Addres a htrnl VO Eo ns *‏ 


9 ¥ | Searrh web,, |Searhweb.. 1| |All E2] 7 ۳ 2 WN @ 7 a7 


Welcome 


MY Laompukert‏ ل 


ا 


اة خط اقل الت كت امن لقا : 


<U> welcome </U> | 


<SUP> welcon </SUP> 


الخط المنخفض 


<SUP> welcon </SUP> 


الخد الگر 


<BIG> welcom </BIG> 


اللا 


<SMALL> welcome </SMALL> 


ملاحظة 


يمكن كتابة اكثر من امر مع بعض مع ملاحظة ان ما يفتح اولا يقفل اخر كما يلى : 


<B><IÞ<U> welcome in my sIit </U></IÞ</B> 


ويظهر هذة الاوامر كمايلى فى المستعرض : 


Ê GOMAN - Microsoft Internet Explorer 


File Edit Yiew Favorites Tools Help 
آ 3 .و کح 2 ۳ ر‎ 1 a 
ا‎ Back 2 5 2 ر د‎ Search e Favorites 42 چ ` ت‎ x *” س‎ e 4 


Address #1] D\01pag.html ا‎ Go Like 


N > 1 Search REE ا‎ 1 E7 > > @ @ ٣ FF 2 


= 


Welcome In my sit 


4 My Computer 


3 Dane 


لاظهار النص كما هو مكتوب فى ال لaمعtثNo‏ 
لاظهار النص کما هو مکتوب فی ال Notepad‏ فمثلا نرید كتابة النص التالى داخل 
. »۰ کما هو ظاهر 


Dear visitor 
I hope to enjoy in my sit 


Contact us 
لكتابة النص كما هو يكتب الامر التالى‎ 
pre> ...</PIEZ 
: Notepad لكتابة النص كما هو يكتب الامر التالى داخل ملف اف—‎ 
<pre> 


Dear visitor 
I hope to enjoy in my sit 


Contact us 


</pre> 


:Notepad —| ملف‎ 


FE pag - Notepad 
Fils Edit Format Yim Help 


HTM = 
hears 
2 body 
4tLItla> GOMAN 4TIL lez 


Ar a> 


Dear wistor 
haope to enjoy 1n my s1 


LONTAZT U5 


ay pr e> 


4# body 
+#headz 
2 htmls= 


Ê GOMAN - Microsoft Internet Explorer EEE 
ar 


Fil Edit View Favorites Tools Help 


@ Back 2 5 2 2 a Search le Favorites 2 @- ت‎ x * اه س‎ 3 
Address Î] D:foipag. html. SHOE. 


fp > | Searchweb,.. ار‎ 4 E >= @ - ا‎ - a @ @ > 


DERT TILSTEOE 
I hope to Fnjoy in my sit 


contact u3 


3 Done ل‎ My Lompuber 


# محاذة للنصوص 
E E O‏ 
ماه والقيم )م] لمحاذة النص لليسار او عع لمحاذة اللص يمين 
او مرمع لجعل النص فى المنتصف ويكتب الامر التالى : 


أمحاذة النص لليمن 


<div align =" right " > welcome </div> 


لمكا التص لسا 


<div align =" left " > welcome </div> 


اة ان ف ااا 


<div align =" center " > welcome </div> 


ويتم أضافة الامر كما لی داخل ملف ال Notepad‏ : 


Bl pag Notepad E BEK 
Fil Edit Format Yiewy Help 


2 


htmlz 
<head> 
2# body 
TITLE= GOMAN <fTITle> 


Hiv align="right"> welcoms#Hiuz 

Hiv aliîgn="left"= welcomsfHiwuz 2 
Hiv align="center "zs wel zome wz 

4# boyz 


+7 headz 
2# htmMlz 


8ا 


ويظهر فى المستعرض كما يلى : 


Û GOMAN - Microsoft Inter net Explorer 


Fil Edt Yiew Fawarikes Tools Help iy 
@ Bak @ 3 2 2 کر‎ Search ا‎ Favorites 4 3 7 خ‎ K> اه ا‎ 4 
Address #8] Dri0ipag.html vI EI irks * 


Af) > | Search web... ع‎ 1 HEH” ® ° YY -@O O - a: 
Y7 ج‎ êb SEI zareh 4% [SF Bookmarks” PF settings ” | Messenger” ÊZ mail êj Space EY Hews 
E3 
wElcorn 
welcorn 
welcotn 
&] Gone ل‎ My Lomplker 


ENE Û 73AN 


نلاحظ ما لی : 


- الخاصية هى ال مع ااج 
- القيمة هنا هى |— left / center / right‏ 


<div align="left"> 


Element Value 
attrıbute 


غك لعمل خط داخل الصفحة 
أعمل خط داخل الصفحة نستخدم تاج او ال ٤٘عصemاcع >H]۸<>‏ ولتغیر محادذة 
يستخدم الخاصية ال align‏ ويكتب الامر داخل ملف ال Notepad‏ كما ل 


<HR align="center"> 


لعمل الخط فى اليمين 


<HR align="right"> 


لحمل الخ ت السار 


<HR align="left"> 


E 


<HR size="3"> 


او 


<HR size="]"> 


لتغيير عرض الخط 
>HR Width="300"<‏ بالبیكىل 
<HR Wıdth="100">‏ 


<HR Width="50%"> şil 


اغا ر ار ا ا 


Coffee 
Mılk 

Mango 
Limon 


لكتابة هذة القائمة المتسلسة يستخدم التاج التالى : 


<OL> 

E </LI> 
IE O </LI> 
SIS ONE 


Noteمpaل4ل ولعمل القائمة السابقة يكتب الامر التالى داخل ملف ال‎ 
<OL> 
<LÎÞ Coffee </ LP 
<LÞ Milk </LI> 
<LIÎÞ Mango </LI> 
<LPÞ Limon </LIÞ 


</OL> 


ويظهر فى ملف ال 4همء)ه× كما يلى 


E` page - Hotepad 
File Edit Format View Help 


<html z= 

zheadz 

< MOLY 

LILLIE» GOMAN 4fTIT ler 


IL 
2LI=CZCDTTEESALI= 
2LI2MIIkKEFLI= 
ZLIZMANAD#LI 
LIL TMDNEFLI+ 
الا‎ 


a BOL 
4# heads 
4 htEmMI= 


ا 


A GOMAN - Microsoft Internet Explorer EFI 
File Edit Yiew Favorites Tools Help r 
س‎ Earl 3 ا‎ 2 f £ Search ê Favorites £ @- ix 8 اه اسا‎ 0 

Address 8 D:\Olpag.htrnl أ‎ Go (Links * 
I > | search web, ھا‎ "E> @ >` YY -@O O - î ” 


YP > | Abeer IH:] A, [web search م‎ [fp Bookmarks” FT Settings | ` IMessenger EZ] Mal = hf MySpace ج‎ 


| omen 1 = Add Tab 


1. Coffee 
2. Milk 
3. Mango 
4. Limon 
€] bore HY my Computer 


رد و 
لجعل القائمة المسلسة بقيم ۸ او ¡ او 1 او_۾ تستخدم خاصية_ 1۷٥٤‏ ويكتب الامر 


کما یلی 


` <OL TYPE =A” > 


E </LÞ 
I OT </LÞ 


EW pag - Notepad 
Filê Edit Format Yiey Help 


zhtmlz= 
<head> 
2# BOY = 
<LITtle= GOMAN 4fTIt lez 


OL TYPE =A 
4LI2LOFTFEE<FLIz 
4LI2MITIKSFLIz 
<LIZMaANHOSLI* 
LIL MON LI= 
2L 


2 BOY 
+ hears 
2 HtmIlz= 


ويظهر فى المستعرض كما يلى 


A GOMAN - Microsoft Internet Explorer 
Fil Edt Yiew Fawarikes Tools Help Ry 


@ Back @ ا‎ 2 € £ ) Search ا‎ Favorites @ 3 ۹ & * ا‎ e th 

Address #1 D1Dipag. html vc links * 
A" > Search web,,, ار‎ "E7 ® ` ¥ ° O - a7 
YT > | beer IH:) 7 Web Search 1+ ی‎ [Eê Bookmarks” FT Settings = | [Messenger Û] Mal =  MySpare ض‎ 

| Aaa Tan × 


2 My Lompukter 


كفي القوائم غير المتسلسة واليك المثال التالى عليها ٠‏ 


Coffee 
Milk 

Mango 
Limon 


لكتابة هذة القائمة الغير المتسلسة يستخدم التاج التالى : 


<UL> 

TT </LI> 
TIE yT </LI> 
<LI e ILE 


ولل افا السا كي اهر اال 


ويظهر فى ملف ال dهمء)ہ×‏ کما یلى 


Notepad —| داخل ملف‎ 
<UL> 
<LI> Coffee </LI> 
<LÎÞ Milk </LI> 
<LIÎÞ Mango </LI> 
<LÞ Limon </LI> 


</UL> 


ا 


E pag - Notepad 
Fil Edit Forrnat Wie Help 


<Htmlz 


2# Bayz 
4Litle= OMAN <FTiIT lez» 


IIL 
4LIz=ZDTFeEEZFLIY 
2LISMIIEZFLIY 
<LI*MaNg{Oc#LI 
LIL TMONE#LI* 
الا‎ 


2F BOdyz 
+#healdz= 
+4 htmMIz= 


يه 
أ 
1 
ا ل ا سسس 


Ê GOMAN - Microsoft Internet Explorer ES 
Fils Edit Yiew Favorites Tools Help iy 


I کر € 5 5 ای‎ Search le Favorites 4 ٤ 2 FR < ۳ اء‎ 33 


Address B3 Di{Oipag. html اس‎ GO Links # 
> | search web. 2 EH * ® - ¥ -@O O - & > 


Y7 2 | Abeer (H:] wek search م‎ [ê Bookmarks PF settings” 1I Messenger™ E2 mail > f MySpace 2 


| 11 Goman | Ad Tab 


e Lofee 
e» Wilk 
» Mango 


» Limon 


3 Doanë 8 My Computer 


ملحوظة هامة 
لجعل القائمة الغيرالمسلسة برموز مختلفة كرمز الدائرة المفرغةع[ء ٣او‏ رمز المربع 
Square‏ تستخدم خاصیة ع٥۲۷۴‏ ویکتب الامر 


کما یلی 


` <UL TYPE =”square” > 


| الدرس السابع : الصور 


لادراج الصور داخل صفحات مو قعات یستخدم تاج ال [M6<‏ > وهو تlج Empty‏ 
ی) ای انه تاج لا يحتاج الى ان يغلق ولكن هذا لا يكفى لادراج صورة لذلك يتبع 
هذا التاج خاصية ال 58٣‏ لتحديد موقع واسم الصورة التى سوف يتم ادراجها 
ملحوظة هاما :يفطل ضاف الضر رة المر اة ادر احا کے تفن الفر نر ا ال الد 
يوجد بة صفحات موقعك 

وبذلك يكتب الامر التالى لادراج اى صورة : 

ارو کے کن اا 


<IMG SRC = " <"مصدر الصورة‎ 


ا ا کات الور م فرح تآ الفط ك حا ا اس الصورة 
کفالی: 


اسم الصورة "/ اسم المجلد " = <IMG SRC‏ 


و غا 
المثال الاول 
سوف اقو بفتح فولدر او مجلد باسم وع عه زفى نفس الفولدر او المجلد الموجود فية 
صفحات الموقع وسادخل فية الصورة المراد ادراجه وهى باسمم ]هع لادراج هذة 
الصورة سوف اكتب الامر التالى داخل ملف ال dمم Note‏ 

< IMG SRC= " images/ carton.jpg " > 


ويظهر ملف ال 2مہ كما يلى : 


E pag - Notepad 
Fil Edit Formal Yiew Help 


2htmlz 
2headz 
boyz 
TIT lE> GOMAN TIT lez 


IMS SRC="Tmages#carton. j PI" z 
2 Body 


2# head 
2 htmMIz 


وتظهر الصفحة كما يلى وبها الصورة التى تم ادراجها 
GOMAN - Microsoft Internet Explorer TEK‏ 3 
File Edit Yiew Farorites Tools Help‏ 


@ Back اگ € 2 5 ثا‎ Search SF Favorites @ - x ¥ ا‎ ¥ e ۹ 


Search web, + | E 7 @ ¬ @ @ 


iweb Search| [Ep Bookmarker PFsettings 7 | ê Messenger” EZ mail‏ ا 


| 2 My Lomputer 


المثال الثاني 
ق E‏ ا ا ف ا ا و ا 
الموقع و الصورة المراد ادراجه وهى باسم,م)إهء لادراج هذة الصورة سوف اكتب 
الامر التالى داخل ملف ال Notepad‏ 

<IMG SRC= " carton.jpg " >‏ 
ويظهر ملف ال لمعه كما يلى : 


E pag - Notepad 


Fil Edit Format View Help 


html z 
2headz 
2BONy 
4tTITlea> SOMAN 27TIE laz 


IMS SRZ="cZarton. JPA + 
2# bocyz 


4# headz 
2 tMIz 


8ا 


وتظهر الصفحة كما يلى وبها الصورة التى تم ادراجها 


GOMAN - Microsoft Internet Explorer 


File Edt View Favorites Tools Help 


O sx کر ف 2 ۸# ه‎ Search 7 Favorites @ 3 ت‎ x 


a E KA و‎ 
Address ÊêJDılolipag. hm E ink 
ال ت ت‎ EG E OR 


27 


ا كانت الضورة 


Fil Edit View Favorites Tools Help iy 


OQ sx 3 î کر‎ Search E Folders EHH 


Address | D:10 


n a 


File and Folder Tasks 


ZÎ Make a new Folder 


@ Publish this Folder ta he 
web 


Share this Folder‏ ا 


Other Places 


i Abeer (D) 

8 My Gocumenks 
Ê Shared Documents 
my Computer 

My Network Places‏ ر 


Details 


staf #2. @? >-> m3 <-2 < Ed | Rw 3 > Ea <C. ENE = a Û i, 123P 


F pag - Notepad 
File Edit Format Yi Help 


<html z= 
heads 
<body 
LITE GOMAN <7TIt a= 


IMG SRC=". .7images#carton. jpg" 
3# BOY 


x heallz» | 
2F HTM I= 


لوضع خلفية صورة نستخدىم اlخاصيڍة BacksroUund‏ 
نک الامر الال 


<body Background="car.jpg'> 


التحكم فی خصائص الصور 


# التحكم فى طول وعرض الصورة 


تستخدم خاصیة طا ل۷ کما یلی 


` <IMG SRC="carton.jpg" width="300" height ="200"> 


ويظهر ملف ال لمعه كما يلى : 


E pag - Notepad EAS 


Fill Edit Format View Help 


hrm lz 
<headz 
BOY 
titles GOMAN <#TIt lez 


IMS SRC="carton. pA" width="300" height=" 200z 


4 body 
4# head 
2F htmlz 


f‏ لتنسق محاذاة اللصورة 


تنسيق محاذاة الصورة تستخدم خاصية ال معنا : 
د محاذاة ١‏ ر م خا ال g8‏ كما ب 
لتسيق الصورة فى الوسط تستخدم خاصية ال Align‏ والقیمة ععع كما یلى : 


<div align="center"> <IMG SRC="carton.Jpg"> 


</div> 


ويظهر ملف ال لمعه كما يلى : 


FW pag - Notepad 
File Edit Format View Help 


2ZhHEM I= 
heads 
o 
4LItle> GOMAN 47TIT e> 


zHiw align="center"> IMG SEZ="czarton. jp" < 


2Tu 


2# Boyz 
<# heads 
4F htmlz= 


A GOMAN - Microsoft Inter net Explorer 


Fila Edit Yiew Favorites Tools Help i 

@ Bak @ ا‎ 2 ê 2 Search ا‎ Favorites 4 2 " خض‎ x 2 سا‎ e 5 

Address 3 DiiDipag.htrnl ا‎ a0 Links FF 

IN >” Search web... م‎ 7 1 EE i f > 0 @ 2 5 2 
” U, 7 Web Search [Bê Bookmarks” Pl settings ” | messenger” 3 mail 4 MySPpaEE KF News 


€] Done J My Computer 
: لتسيق الصورة فى اليمن تستخدم خاصية ال ع۸11 والقيمة )۴ه] كما يلى‎ 
<div align="left"> <IMG SRC="carton.jpg"> 


</div> 


أتسيق الصورة فى اليسار تستخدم خاصية Align —dI‏ والقيمة )عام كما يلى : 


<div align="left"> <IMG SRC="carton.jpg"> 


</div> 


space ةيصاخلli_#‎ 


هى تعبر عن المسافه بين الصورة والكلام المجاور فمثلا يمكن كتابة الكود كما يلى : 


A 
1 


<IMG SRC="carton.jpg" Hspace="10"> 


هنا المسافه سوف تكون بمقدرار 10 


ويظهر ملف ال لمعه كما يلى : 


\ pag - Notepad W BK 


File: Edit Format View Help 


1# 


4htmMIlsz 
heads 
2hoaodyz 
4LTITle> GOMAN <7TIT lez 


IMS SRZ="zarton. jpg" Hspace="30"y 


2 Body 
4 heads 
E 


1# 


ويظهر بالمستعرض كما 
ا 


A GOMAN - Microsoft Internet Explorer CIFIK 
0 


Fil Edit Yim Favorites Tools Help 


@ E 2 کر ۵ 8 ا‎ Search f Favorkes ا‎ a" خ‎ x س ا‎ 8 0 
Address [8] D0pag.himl 1 Eco ks * 
Ip > | Searchweb,.. 2 B> @ - ¥ -O O > @ - 


4 My Lomputer 


E € = | ا‎ B08 AM 


ALT خاصیية‎ # 


Ee la N NC E a 
خبار " اظهار الصورة تلقائيا غير فعال فى المتصفح كا تستطيع ملاحظتة فى الفترة‎ 
N GS GS 
بالمؤشر على الصورة فتلاحظ اسم الصورة او العبارة التى قمت بكتابتها فمثلا سوف‎ 
اقوم بكتابة اسم الصورة فى الامر كما يلى‎ 


<IMG SRC="carton.jpg''" ALT="" carton image”> 


وبالتالى عند الوقوف على الصورة او فى حالة تحميل الصفحة نلاحظ ظهر عبارة 
carton image‏ مکان الصورة کما یلی : 


GOMAN - Microsoft Internet Explorer FIK 
Fila Edit View Favorites Tools Help i 


a Back 3 5 E1 ۵ 2 Search TF Favorites 5 @- x 5 اسا‎ Zl 6 ا‎ 
M~ | Search web... م‎ 7 i Hl > @ > ا‎ > 0 @ 2 i” 
5 A Yeh Search 1r [fF Bookmarks= PF settings ” | ê Messenger” 392 mail î Hy5pace EY News 2 


N Al 
0 1 


لھ جر 


نلاحظ ظهر عبارة عmag‏ 1 Oe carton‏ 


بالوقوف بالموشر على الصور ة 


1 Dong 9 My Computer 


EN Em = BD YY. D1 Am 


BORDER ةîيصا|lخè‎ #% 


تدم هة الخاضةة لمل أطار حول الضررة ولتك بسك رذلكمن خلال اة 
رقم یمثل بالبیکسل کما یلی 


<IMG SRC= " carton .jpg " BORDER= " 10" > 


ويظهر فى المستعرض كما يلى : 


TB GOMAN - Microsoft Inter net Explorer 
Fil Edit Yiew Favorites Tools Help r 


@ BãÉ @ 5 2 ۵ ى‎ Search f Favorites 2 @- x 5 - kl ۹ 

ûddress E] Drioipag html IE ks 
- > | Search web. 2 El > @ ` ك‎ ¬ @ @ - Gh > 
u aE [fê Bookmarks PA 5ettings ” أ‎ () Messenger” 32 mail 2 ğ Spare EY News 
3 


12 


3 ن‎ My Lormputer 


الوصلات التشعبية او الروابط هى روح الانترنت واذا كانت الانترنت بمجملها هى 
شبكة العنكبوت فان هذة الوصلات هى الخيوط التى تشكل هذة الشبكة وتؤلف حلقات 
الوصل بين ملايين من موقعها › تنقر على وصلة ما فتنقلك الى صفحة اخرى فى نفس 
الموقع ... وتنقر على وصلة اخرى فتنقلك كليا الى موقع اخر تماما ... وصلة اخرى 
خط تخل ا راخری تت ن مقا مرا ي وره 

هناك عدة خيارات للوصلات التشعبية منها ان تكون الوصلة لموقع اخر › او ان تكون 
لصفحة اخرى داخل الموقع نفسة » ومنها ان تكون لمكان اخر داخل الصفحة › او ان 
تكون وصلة لعنوان بريد الكترونى . وسوف نقوم بشرح كل واحدة ان شاء الله تعالى . 


لانشاء اى رابطة يستخدم العنصر <۸> ..... <۸/> وھی اختصار لکlلمة Anchor‏ 
والخاصیة HR E۴‏ وھی اختصار لکلمة عcہعاع] hy pمعrtعxt re‏ وھی التی تحدد من 
خلالها الموقع الذى نريد الوصول الية ويجب ان يكتب عنوان الموقع كاملا . 

الان سوف نقوم بشرح كيفية ادراج كل رابطة على حدة كما يلى : 


الحالة الاو 
لعمل رابطة للانتقال الى موقع اخر يكتب الامر التالى :اسم الموقع 


<A HREF="name of website "> </A> 


ولكن بقى لنا شىء واحد وهو العبارة او الكلمة التى سيتم الضغط عليها لتشغيل الوصلة 
وهذة يجب ان توضع الامر السابق <۸/> .... <۸> وبالتالى عند النقر على هذة 
الگلمة أو العبارة سوف ننتفل الى المرقع المظلوب 
فمتلا سوف نقوم بادراج رابطة تشعبية لموقع البحث الشهير ماعمه6 فتقوم بكتابة 
الامر التالى داخل ملف ال ل4م٥)ه×‏ كما يلى 

<A HREF = " http://www.google.com.eg " > Welcome </A> 
وبالتالى عند الضعط على كلمة عمص٥ء[مس فى المستعرض سوف تنقلنا الى موقع‎ 
: ویظهر فی ملف ال 4لھمع)ہN کما یلی‎ Gەogام‎ 
E. pag - Notepad r gras EAKW 


File Edit Formal Yiewy Help 


و 


4htmlz 
4headz= 
E 
LIL leE> GOMAN 4/TITE lez 


4A, HREF= "HLETEP ew. JODIE. OM. EF" 2WELZOM 427A 


2# bodys 
4# heanz= 
4 html= 


ويظهر فى المستعرض كما يلى : 


A GOMAN - Microsoft Internet Explorer 


File Edit View Favorites Tonls Help 


a Balk 3 ا‎ 2 ۵ 2 Search ا‎ Favorites 2 3 ف چ‎ x 1 »ا‎ kd ر‎ 
Address 2 Dı: ا س‎ Go Links 
search web... 2 N E * ® ` ¥Y-O O7 7 
mas ' [Sp Eookmarks= PO settings ” | € Get TIES now! ê Messenger” E2] Mail + 
+ Add Tab 
WELO 
بالضغط على کلمة عدصمء[عس يتم‎ 
الانقال الى مد جورخل‎ 
إل‎ pag - Notepad ل‎ My Larnputer 


EES HEO= BSD <© an 


ملاحظة هامة 
يمكن ادراج صورة او زرار كبديل عن الكلمات او العبارة وكل ما عليك فعلة فى هذة 
الحالة هو فقط كتابة الامر الخاص بادراج الصورة بين الامر السابق<۸/> <۸ > 


<A HREF="name of website "><IMG SRC =" carton.jpg"> </A> 


Notepجaل ويكتب الامر كما يلى اإخل ملف ان‎ 
< A HREF= " http://www.google.com.eg " > 
<IMG SRC ="carton .jpg " > 
</A> 


ويظهر فى ملف ال 4همع)هN‏ كما يلى : 


pap, - Notepad 


L- 


File Edit Format Yim Help 


html 
+headz 
+2BOMyz 
LIL leE= GOMAN FTL laz 


2A HREF= "HETP E mw. JOD lE. ZOM. Eq" 


IMG SREC="Zarton. jP" 


بر ر 


2# bOHyz 
2# headz= 
2 htmIlz= 


اال ع اا کے ار را د ارک مو ی لے م ت 
G08‏ کما یلی 


Î GOMAN - Microsoft Inter net Explorer EFS 


Fil Edt View Favorites Tools Help 0 


@ Bar @ کر @ 1 5 ت‎ Search TF Favorites 2 @- x > ا‎ kl 3 


Address #]D:ipag.himl 0 Bm us? 
î > | Search web... م‎ 7 1 BH > @ - ¥ -@O @ - @ - 


و 
ننتقل الى موقع جوجل 


#( ا‎ | | 9 My Computer 


ISA. ENKI = BE 


ملف إر]ط او غيرة فى هذة الحالة فان ما يكتب فى الخاصیۃ H۸٤۴‏ هو اسم 
هذا الملف المطلوب الوصول الية كما يلى : 
اولا سوف اقوم بانشاء صفحة جديدة ضمن صفحات الموقع ولنفترض ان ملف ال 
ML‏ [ګ الذی يحتويها هو باسم 1ص)ط.2عه۴ وسوف اقوم بانشاء هذا الملف داخل 
المجلد الموجود بة الملف الاول كما هو ظاهر فى الشكل التالى: 
EE‏ 
۳ 


Fils Edit View Fayvarites Tools Help 


E r @ 0 کے‎ Search E Folders EE 


Address | bip ت ا‎ 


: i ا‎ carton ا‎ <. pag 
File and Folder Tasks : 349 x 302 HTML Document الصفحة الا ل‎ 
| JPE Image 1 KE 5 
ÎÎ Make a new Folder EE 
€ Publish this folder ta the . pa2 
Web HTML Dacurmanit 
î share this folder EE 


Other Places 


الصفكة اقا 


Abeer (D!}‏ ق 

8| My Documents 
lÊ Shared Documents 
4 My Coripuker 


2 MY Metwark Places 


Details 


htrnl1 [Cornpatibility Made] - Microsoft Word 


ê ت‎ EL û... FI x Eo... N E E j= Û SAM 


ما اريدة هو اضافة وصلة فى الصفحة الاولى بالضغط عليها انتقل الى الصفحة الثانية 
أذلك اقوم بكتابة الامر التالى داخل ملف ال Notepad‏ 
<A HREF= " pag2.html" > go to pag2</A>‏ 


ويظهر ملف ال له2مع)هN‏ كما يلى : 


E pag - Notepad EE 


Filê Edit Formal Yiew Help 


4html= 
<hearlz 
BOR 
LIL lE> GOMAN <t#TIT le> 


4#. HREF= "paqd. html "zgqo to paqed s7 A> 


2# boyz 
+4 healz= 
rE 


وبفتح المستعرض وبالضغط على العبارة المكتوبة بین <۸/> ....<۸/> وهى فى 
المثال التالى 2عهم ه) هع سوف ننتقل الى الصفحة الثانية 
ویظهر بالمستعرض كما یلى : 


Ê GOMAN - Microsoft Internet Explorer 
Fils Edt Yew Favorites Tools Help 
a Back @ 5 3 f | sear 3F Favorites 5 a Ê ¥ اس‎ kK n 
IE] inks 


ERHEBCETECCE @- 


Search web... 


i r 


NGC 
ننتقل الى 2عٍهم‎ 


+ My Lormpuker 


8 Done 
Ea. lak. EE bd 515am 


وايضا يمكن اضافة صورة بدل من عبارة كما سبق وتم الشرح وتكون بكتابة الامر 


التالى : 


<A HREF=" pag2.html " ><IMG SRC=" carton.jpg " ></A> 


# الحاله الثالثة وهى ان نقوم بالاشارة الى مكان اخر داخل نفس الصفحة الى اولها 
مثلا او الى اخرهااو اى مكان اخر نريدة 


فى هذة الحالة نقوم اولا بتعريف او تسميتة هذا المكان باسم معين سوف نقوم باستخدانة 


لاحقا فى الوصلة ولتعريفة او تسميتة يستخدم الخاصة "۸١۴‏ وسوف يتضح اكثر 
هذة الحالة بالمثال التوضحى التالى : 
مثال توضحی 
سوف اقوم الان باضافة وصلة تشعبية تنقل الزائرين الى مكان اخر داخل نفس الصفحة 
ارلا بت ااه الى هة اة رار رل كا ها ت رها اكل الاير 
<۸/> ...<۸> ( مثلا اول کلمة فی الفقرة ھی إع)) ع[ ٥ط٦‏ ) وبالتالی سوف اقوم 
بكتابة الامر llتJl١٣”ى <A NAME ="The litre">The lit{re</A>‏ 
ملحوظة قمت باستخدام الخاصية N۸1۴٤‏ لتعريف المكان الذى سوف يتم الرجوع الية 
اصبحت هذة الفقرة جاهزة لكى نقوم بادراج وصلات اليها من اى مكان فى الملف 
ثانيا هى ادراج وصلة لهذة الفقرة اى تحديد الكلمة التى عند النقر عليها سوف ننتقل الى 
بداية الفقرة من جديد كما فى الامر التالى : 
<A HREF=" #The litre"> WELCOM </A>‏ 
لاحظ اننا لم نكتف بذكر اسم الفقرة لوحدها بل يجب ان تقرن بالاشارة التالية # 
ويكتب الامر كما يلى داخل ملف ال لجNotep‏ 
<A HREF NAME =" The litre" > The litre </A>‏ 


<A HREF=" # The litre" >go to the first line </A> 


یظھر کما یلی فی ملف |— Notepad‏ 


' pas2 - Notepad 


4TiTleE> GOMAN 4/TIT les 

+û. NAME ="The litre'"'z=The \itresyfAaz 

The litre (spelled Titer in Amerîzan English and German] is a metrîz2 
The Letter Generator 15 an interactive tool that invites student 


the Federal Debt collection Practices Act, You are allowed to cha 
the Federal Debt Zollection Practices ACT, YOLU are allowed to 2ha 


the Federal Debt Collection Practices ACT, yol are allowed to cha 


thea Federal Debt Zollection Practices ACT, yDOLl are allowed to cha 


the Federal Debt Zollection Practices ACT, YOL allowed to 


4A. HREF=" #The \1tre"z= WELZOM 


2# body 


1I 


ع الحاله الاخيرة وال 
ف هذة الحالة نقوم باستخدم 1۸1110 قبل الخاصية H۸٤۴‏ لکی تتدل على ان 
العنوان الذی یلی هو عنوان ]۸1 EM‏ بعد خاصیة ال H۸٤۴‏ ولیس ای عنوان اخر 
ویکتب الامر کمایلی : 


<A HREF=" MAILTO :nany2leh @hotmall.com">email me </A> 


تعد الجداول من اقوى الادوات التى تضمنها لغة ال 1۷[ وتقريبا لا يوجد موقع 
فى الانترنت الا ويستخدمها بصورة او باخرة والحقيقة ان وضع الجداول فى صفحات 
نت ا ضر غل تک ات من قلاات الے تاح ائ ر کیا کی مرف راع 
بل يتعدى ذلك فى استخدامها فى تصميم الصفحات نفسها وتنظيمها والتحكم بمظهرها . 
والان سوف نقوم بتعريف بعض الاكواد المستخدمة فى انشاء جدول : 

ارا كت شاد رل اراج ار اللي 


<TABLE > ....</TABLE> 


ثانيا نقوم بتحديد عدد الصفوف التى نريدها فى الجدول هل نريد3 صفوف او 4 


صفوف او اى عدد تريدة لذلك نقوم بكتابة الامر التالي 


CIR>.... TIR; 


فمثلا لو تريد انشاء ثلاثة صفوف سوف تقوم بتكرار الامر السابق3 مرات 
ثالثا نقوم بتحديد عدد الخلايا او الاعمدة فى كل صف لذلك نقوم بكتابة الامر التالى : 


<TD>...</TD> 


الال الو 


المتثال الاول 


فمثلا لو اردنا انشاء جدول مكون من ثلاثة صفوف و 2 عمود نكتب الاوامر التالية: 
<TABLE wıidth="365" height="218" border="1'">‏ 


wıidth="365" height="218" border="1" 


<IR> 
<TD>! </TD> 
<TD> 2</TD> 
</TR> 


<IR> 
<TD> 3</TD> 
<TD> 4</TD> 
</TR> 


<IR> 
<TD> 5</TD> 
<TD> 6</TD> 
</TR> 


</TABLE> 


ويظهر لنا الجدول فى المستعرض كما يلى : 


A GOMAN - Microsoft Inter net Explorer 


Fila Edit View Favorites Tools Help r 


@ Back 3 ا‎ E1 ê کر‎ Search le Favorktes 2 @- ك‎ x - ki و‎ 


Address #] Di1Oipag, eee eee EJ Links * 
Ap >” | Search web. ا‎ = BH > @ - ¥ -@ 8 - @ ~ 


earch 1 [Rp Bookmarks™ FT settings | Ê Get IES now! ğ) Messenger” Ë2] Mail > 2 


3 Gone 2 My Lompuiter 


ملاحظة هامة 


خصائص الجداول 
| خlصڍ BORDER‏ 
تقوم هذة الخاصية باضافة حدود للجدول وتحديد سماكتها والقيمة الافتراضية لها 
ھی صفر ای لا حدود لھا تکتب بالسنتمیتر ای5 او 6 او 3 سم وھکذا ویکتب 
الامر كما یلى : 


<TABLE BORDER ="5'"> ... </TABLE> 


1 -خlصية WIDTH‏ 
تستخدم هذة الخاصية لتحديد عرض الجدول ككل . وهناك اسلوبين لتحديد 
عرض الجدول ام نسبى اى كتابة رقم بنسبة مئوية اى نسبة من الشاشة او بكتابتة 
بشکل مطلق ای رقم بالبیکسل ویکتب الامر کما یلى : 


<TABLE border="5" WIDTH="50%">...</TABLE> 
او کما یلی‎ 


<TABLE BORDER="1" WIDTH ="300" > 


خlصıة HEIGHT‏ 
تستخدم هذة الخاصية لتحديد ارتفاع الجدول ويكون تحديد هذا الارتفاع من خلال 
قيمة مطلقة تحدد الارتفاع بالبيكسل او قيمة نسبية تحدد ارتفاع الجدول بالنسبة 


لارتفاع صفحة المتصفح ويكتب الامر كما يلى : 


<TABLE BORDER="1" WIDTH ="300" HEIGHT ="200" >... </TABLE> 


<‘ خlصıة CELLSPACING‏ 
لتحديد المسافة بين كل خلية من خلايا الجدول ويكتب الامر كما يلى : 


<TABLE BORDER="1" CELLSPACING ="10" >... </TABLE> 


° خlصıة CELLPADDING‏ 
لتحديد المسافة الفاصلة بين الحدود وبداية النص فى كل خلية او لنقل لتحديد حجم 
الوا ل ا الل ر کار کا 


<TABLE BORDER="1" CELLPADDING ="10" >... ŞTABLE> 


ALIGN ةيصاlخ-‎ ٦ 
لتحديد محاذة الجدول ام لليمين او لليسار او للوسط ويكتب الامر كما يلى‎ 


<TABLE BORDER="1" ALIGN ="LEFT" >... </TABLE> 


BGCOLOR ةڍصlخ‎ Y 
وتستخدم اتحدید لون خلفية الجدول‎ 


<TABLE BORDER ="1" BGCOLOR = " #0O0FFQOO " >... </TABLE> 


وبهذا نكون انتهينا من خصائص الجداول وننتقل الى خصائص الخلايا 


حصا اس 
| خlاصية ALIGN‏ 

لتحديد محاذاة النص افقيا داخل الخلايا اما يمين او يسار او فى المنتصف 

وتستخدم القيم LEFT / RIGHT / CENTER‏ ویکتب الامر کما یلی 


<TABLE BORDER =" 1" WIDTH "300 " > 
<TR ALIGN =" CENTER" > 


<ID>1</TD> 
<TD>2</TD> 


</TR> 


</TABLE> 


۲ خاصية VALIGN‏ 
لتحديد محاذاة النص عموديا داخل الخلايا اما لاعلى او لاسفل او فى المنتصف 
وتستخدم القيم 0P / BOTTOM / MIDDLE‏ ویکتب الامر کما یلی 


<TABLE BORDER =" 1" WIDTH "300 " > 
<TR VALIGN = "TOP" > 


<ITD>1</TD> 
<TD>2</TD> 


</IR> 


</TABLE> 


BGCOLOR ةيصlخ‎ Y 
: لتحديد لون خلفية الخلايا ويكتب الامر كما يلى‎ 


<TABLE BORDER =" 1" WIDTH "300 " > 
<TR BGCOLOR =" #0OFFOO" > 


<ITD>1</TD> 
<ID>2</TD> 


</TR> 


</TABLE> 


I E EN A CA GS 
: التالية‎ 


<table width ="344" helght="136" border="1" > 


<tr bgcolor = "#FFCC33" > 
<td align ="center">1</td> 
<td align ="center">2</td> 
<td align ="center">3</td> 


</tr> 


<İI> 
<td align ="center">4</td> 
<td align ="center">5</td> 
<td align ="center">6</td> 


</tr> 


<Ir> 
<td align ="center">/</td> 
<td align ="center">8</td> 
<td align ="center">9</td> 


</tr> 


</table> 


ويتم كتبة الاوامر السابقة فى ملف ال Notepad‏ کما بل : 


Fils Edit Format Wie Help 


ا 
ZLIL lez GOMAN FTL e>‏ 


stable width ="344" heîght="136" baordear="1" x 


4TF bglEolor = "#FFCZSH" > 
tA align ="czenter "'z1sftdz 
tA align ="center'"'zds7tdz 
TA alîqn ="center ">37 tdz> 


TA Nes 


LP 
align ="czenter "z4 4fTdz 
align ="center "=54fTdz= 
align ="czenter "»Ös7TA> 
TF 


STP 
align ="czenter "zFsfTtdz 
align ="czenter "z»8<fTdz 
align ="czenter "»Be7TAz 
TANE 


tTaAble> 


2 BO 
<#headz 
2F RTM 


A GOMAN - Microsoft Internet Explorer 


Fils Edt view Favorites Tools Help iy 
ا‎ Bark 2 ع @ 2 ا‎ Search qh Favorites @ ك‎ ّ 2 x b1 le i ۹ 
Address #3 Di0ipag. html | Go Links # 
I0 ¬” | Search web... م‎ 7 NE BG >-> ¥Y-O O - >” 
A 7 web search 1 E Bonkmarks” FT settings 7 | @& tek IES nom! 3 Messenger ™ Ê Mail ” 22 


&] Danê 9 My Carnpuiter 


COLSPAN خاصية‎ ٤‘ 
يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التى تليها افقيا ويكتب‎ 


1 کما : 
لامر كما یلی : > <TD COLSPAN= "n"‏ 


فمثلا فى المتال السابق نريد دمج خليتين فنكتب الاوامر التالية 


<table width ="344" height="136" border="1" > 
<tr bgcolor = "#FFCC33" > 
<td align ="center" colspan =" 2 ">1</td> 
<td align ="center">2</td> 
<td align ="center">3</td> 


</tr> 


<ir> 
<td align ="center">4</td> 
<td align ="center">5</td> 
<td align ="center">6</td> 


</tr> 


<Ir> 
<td align ="center">7/</td> 
<td align ="center">8</td> 
<td align ="center">9</td> 
<tr> 


</table> 


° خlصıة ROWSPAN‏ 
يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التى تليها عموديا ويكتب 


<ID ROWSPAN= "n" > : الامر كما يلى‎ 


هناك نوع خاص من الخلايا التى يتم تعريفها باستخدام الامر التالى 
STH > MOH‏ 


وهی اختصار ذأ HEADER‏ EاAB‏ '" ای راس الجدول والفرق الوحید بینھا 
وبين <[۲/> .... <1> هو ان النص الذى تحتوية يظهر باللون الاسود 
ی ی 
الختا الت م د5 هى ها الت هيا 


وبهذا نكون قد انتهينا من دراسة الجداول 


النماذج تعتبر من المواضيع المتقدمة فى لغة ال 1اط الا ان معظم مواقع الويب تكاد 
لا تخلو منها وذلك لعدة اسباب لعل من اهمها ايجاد امكانية التفاعل بين الموقع وصاحبة 
من جهة والزوار من جهة اخرى .. احيانا قد تحتاج الى اراء زوار موقعك فى مسائل 
معينة ولا يمكنك الاكتفاء فقط بالبريد الالكترونى لكى تتواصل مع القراء لذلك فان 
النماذج هى الخيار الافضل لك وسوف ندرس النماذج ان شاء الله بالتفصيل 

مع ار أا نا الي يات من الد الان وال ان وال رة 
من المعلومات ويتم كتابة هذة المعلومات فى ما يسمى بال ۴٠۲۳‏ ويمكنك نقل هذة 
البيانات من المستخدم الى ال إع۷إعء 


تختلف اشكال النماذج عن بعضها البعض من حيث المبدا والمظهر وطريفة التعريف 


<FORM > ....</FORM > 


والان سوف ندرس بعض الخصاص التى تتعلق بطبيعة هذة النماذج 


FORM | خصائص‎ 


ACTION I خاصي‎ |١ 


تد الس ن اى مت ارال مات الاج اا ا مها رر : 
المطلوبة وعادتا يكون هذا العنوان لبريد الكترونى انه .ع سوف يتم اراسل البينات 
الية او قد يكون عنوانا لبرنماج 061 موجود على الكمبيوتر الخادم ١ع۷إمء‏ الذى 
تتواجد علية صفحة الويب حيث يستقبل هذة البيانات ويعالجها حسب التعليمات 
الموجودة فية كان يضيفها مثلا الى احدى الصفحات او ان يقوم بالبحث عن كلمة او 
عبارة ضمن صفحات الموقع كما فى نماذج البحث فى صفحات الويب أى ان هذة 
اللاعا هى اه تخل اند أو مسار الفح اى حرف د فب اا 
البیانات بالضغط علی زرار انصطاں؟ بعد ملئ ال ص۲٥۴‏ 


ویکتا الکود کما بلي 


<FORM ACTION= " MAILTO: SOMEONE@DOMAIN.COM " >.....</FORM > 


او 
<FORM ACTION= " NAME _ AND _ ADDRESS _ OF _ CGI _ SCRIPT " >.....</FORM >‏ 


وفى المثال السابق سوف يتم ارسال البيانات الموضوعة داخل النموذج الى عنوان 
البريد الالكترونى المكتوب 


METHOD I خاصي‎ ۲ 


. وهناك قيمتين لهذة الخاصية هما : 


METHOD 


Get 


ا 
البيانات الح Server‏ 


تحدد الطريقة التى سيتم بها التعامل مع العنوان المحدد فى الخاصية السابقة ال 
۸)۸ ای هى قيمة تحمل اسم الطريقة التى سوف ترسل بها البيانات 


1 التى تستخدم فى حالة كون عملية المعالجة داخلية اى تتم داخل الخادم نفسة 
)SER ۷ER)‏ فمثلا لو قمنا بانشاء نموذج للبحث داخل صفحتى فان عملية البحث 
سوف تجرى مباشرة فى الموقع و هى اكثر امانا فى ارسال البيانات الى العع۷إعمS‏ 


.القيمة الثانية هى ۴051 وتستخدم عندما تكون عملية المعالجة سوف تتم خارجيا 
خارج الموقع كمثلا يتم ارسال البيانات الى عنوان بريد الكترونى 


POST 
هی اقل امانا فى ارسال البيانات الى‎ 
SERVER I 
ويظهر مسارالبيانات فى ال‎ 
Address bar 


<FORM ACTION= " NAME _ AND _ ADDRESS _ OF _ CGI _ SCRIPT " METHOD “ GET “>.....</FORM 
| _—_ 


ملاحظة هامة 


1- ال ل04طامM‏ الطريقة التى سوف يتم ارسال البيانات بها ويظهر المسار فى ال 


address par 


2- ال ]عه تحمل مسار الصفحة التى سوف يذهب اليها البيانات 


وبهذا نکون قد انتهینا من دراسة خصائص الN‏ ۴0۸ 


Radio Button #4‏ 
هو يمنحك الاختيار من اكثر من متعدد ولكن لا يسمح الاباختيار واحد فقط كما يلى 


What’s your gender 
male 
female 


ویکتب الکود كما یلى 


اولا یتم كتابة العنصر كما ”ى >" <input type =" Radio‏ 

ثانيا يتم تعريف العنصر باستخدام الخاصية N.۸۷۴‏ وفى المثال هى النوع ×عء 
ثالثا يتم تحديد قيمة للعنصر (عںاج)وفى المثال التالى هى عام او عاجم"٣ع؟‏ 
وبالتالی یکتب الکود کما یلی : 


What’s your gender ? 
<FORM ACTION= " mailto:someone @domain.com " method ="post " > 
<INPUT TYPE = "RADIO" NAME =" sex" VALUE =" male"> male <br> 


<INPUT TYPE = "RADIO" NAME =" sex" VALUE =" female"> female 
</FORM> 


ویکتب الکود كما يلى فى ملف ال dلaمعNot‏ 


ويكتب الكود كما يلى فى ملف ال dجمNote‏ 


E pag3 - Notepad E BK) 
File Edit Format Yim Help 


khtmlz» 


zheads 
LIL IE GOMANSTIT lez 


shtml 
2zhodyz 


what's Your gender ? 


FOAM AZTION= "mailto :someoneAdomaîn. com" method ="post" x» 
INPUT TYPE ="RADIO" NAME ="sex" VALUE ="male'»> male <br> 
INPUT TYPE ="RADID" MAME ="sax" YALUE ="female"= female 

2F FORM= 


2# bodys 
2 html 


» . 2 » 
یھر فی المنر ض کیال‎ 
ZÊ GOMAN - Microsoft Internet Explorer E FIK 
File Edit Yiew Favorites Tools Help A 


@ Batk 3 5 2 @ ر‎ Search e Favorites 5 @- ّ x 2 س‎ e ۹ 
Address (#] D:10ipag3. html E. 


I > | Search web... 2 FF > @ >-> ¥Y¥Y-O O > ı~ 
O 7 web Search 


what's your gender ? 


O male 
® female 


€] Done 3 My Lomputer 
r2 Saf #2ar -| @r., و‎ H.. 2 A, F1 ا‎ ND. HA. 8 1 10:31 AM 


Text fields 4#‏ 
هو مكان للكتابة ويتم كتابة سطر واحد فقط 
فمثلا لو ارد انشاء كلامعا 1×٤‏ يتم ادراج فية الاسم الاول واخر 
يدر ج فية الاسم الثانى لعمل ذلك يكتب الكود التالى : 


[ <FORM ACTION= " mailto:someone @domain.com " method ="post" > 

First name <INPUT TYPE = "TEXT" NAME =" first name " > <br> 

Last name <INPUT TYPE =" TEXT" NAME =" Last name" > 
</FORM> 


ویکتب الکود كما يلى فى ملف ال dجمNote‏ 


E pag3 - Notepad 


Î File Edit Format Wie Help 


ahtmlz 


4headz 
4LIL le GOMANSFT IT a> 


htm lz 
bony 
FEM AZTION= " maillto:someone@domaîin. com " method ="post'z 


First name INPUT TYPE= “TEXT NAME = EERE name’ br 
Last name <INPUT TYPE="TEXT" NMAME="Last name'"'z 


4# FORM 


2# body 
4f htmMIz 


ويظهر فى المستعرض كما يلى : 


3 GOMAN - Microsoft Internet Explorer 


File Edit Yiew Favorites Tools Help چ‎ 
@ Back © 5 2 ê 2 Search چ‎ Favorites 5 3 " چ‎ x 0 ا‎ i 3 
Address Bi DiDipag3. html ¥ G0 Links 


E" > | searchweb,, 1 MH >+ @ > ك‎ - @ @ - @ - 


E EE [E Bookmarks PF settings ” | @ Ger IES nom! Ê Messenger> EZ mail 3 ج‎ 
| ¥ Aad Tab| 3 


Firstname | 
Lastname | 


Î Done | أ‎ | Û my Computer 


10:31 AM 


Checkbox 4È 


هذا الشكل من النماذج تمنحك من الاختيار من اكثر من متعدد كما يلى : 
What 1s your favorite sport ?‏ 
Football‏ 
Basket‏ 
Handball‏ 
ویکتب الامر کما یلی 


What is your favorit sport 


<FORM ACTION= " mailto:someone @domain.com " method ="post" > 


<INPUT TYPE = " checkbox " NAME = " Football " >Football <BR> 
<INPUT TYPE = " checkbOX " NAME = " Basketball " > Basketball<BR> 


<INPUT TYPE = " checkbOX " NAME = " handball " > handball <BR> 
</FORM> 


ويظهر فى ملف ال 4همع†هN‏ كم يلى : 


ويظهر فى ملف ال 4همع†هN‏ كم يلى : 


E pag3 - Notepad CEK 
File Edit Format Yiew Help 


html sz 


head 
TIT lEzaOMAN<JTIT lez 


html 
2bhodyz 


what is your favorit sport 


FORM AZCTION="mai Ito:someconeAdomaîn. com" method="post "x 


4INPUT TYPE="checkbox" NAME="Football"z»Football BR» 
4INPUT TYPE="checktbox" NAME="Basketbal l"=Basketbal [<BR> 
INPUT TYPE="checkbox" NMAME="handbal 1 "=handbal 1 2BR= 

4# FORM 

4 Boys 


LILES 


ويظهر فى المستعرض كما يلى 


Î GOMAN - Microsoft Inter net Explorer 


Filê Edit Yiew Favorites Tools Help î 
@ Balk @ 5 2 @ ۶ J search e Favorites 0 3 x e 0 i 

Address ھا‎ D:{Oipag3. html ا‎ Go Links 
Af > | Searchweb,,, م‎ 7 1 MM > @ 5 0 ا @ 0 و‎ a 2 
Y7 - | a 8 [web search E Bookmarks” FF Settings | @ ek IES nom! 3 Messenger” 2 Mail =” + 


| ¥ add Tan) 


VWhat is yout favorit sp ott 


[IFootball 
CI Baskethall 
O handball 


3| Done 4 My Computer 
rJ staf ar -| @r. TÎ hr. i 0 Di. As 1 KEL & 10:31AM 


Select list JI 


i REC E‏ اکا 
التابعه ل ا1ا tءعاعS‏ مثل ال عصهم و عں اه وهما يستخدمان لتحديد 
بعد ملئ الاستمارة ونقل البيانات الى ال إعرإ مء يوجد خاصيه ال لع)ec Sel‏ 


وسوف نوضح الجصائص السابقة فى المثال التالى : 


<form> 

What is your favorite games?<br> 

<select name=""sport"> 

<option value="football" selected>football 
<option value="basket">basket 

<option value="handball">handball 
</select> 

</form> 


ويظهر فى ملف ال 4همء†هN‏ كم يلى : 


f E pas3 -_ Notepad CIEE) 
Filê Edit Foarrnat Wigy Help 


ahtm l= 


hearlz= 
TIT lESGOMANSTITE I> 


ahtml= 
4 BOC 


4TFOFM= 


what 15 Your Favorite games?sbr sz 


4sSEle2Tt namMe="spOrt x 

option walua="fFootball" selecred»footbal 1l 
Option walua="baskeat "»>bask et 

zûption walua="handball'"z=>handbal | 

a SEET 

4F FOFMY 


2# Bory 
2A htmMIz= 


ويظهر فى المستعرض كما يلى 


ê GOMAN - Microsoft Inter net Explorer 


Filê Edit Yiew Favorites Tools Help ip 

@ Balk @ 5 2 @ کر‎ Search e Favorites 0 3 * x ّ e 3 

Address 1# D:\Opag3. html ا‎ Go Links 
Ff > | Search web... م‎ 7 JF - @ >` YY -@O @ - i” 
Y7 r 1 a 2 [web search ۴ E Bookmarks” FF Settings | @ tek IES nor! 3 Messenger 7 ت‎ Mail ” + 


¥ Addl Tak | 


What i8 yout favorite games? 


handball په‎ 


3| Done My Computer 


3 31A 


Multiple select list نص‎ 4Ë 
هى قائمة بها عدة اختيارات ويمكنك اختيار اكثر من عنصر‎ 
: الكود الخاص بها كما يلى‎ 

<form> 

<select multiple> 
<option>football 
<option>handball 
<option>basketball 
</select> 
</form> 

<form> 


ويظهر فى المستعرض كما يلى 


File Edit Yiew Favorites Tools Help My 


O ta1 5 5 2 € £ J Search le Favorites L2 @- > x <” e 4 th 
ess | #] Di\0ipag3. html vl Ec inks * 
Ê E Searrzh web, . ا م‎ ٢ > > @ @ - a 
YP > 1 ' [Rp Eookmarks” FT settings >  & Get IES now! (J Messenger” ÊZ mal > د‎ 
_] GOMAN ا‎ e Add Tab | 


EEE EEE 


Î GOMAN - Microsoft Internet Explorer 


handball 
basketball 


3| Done 3 My Computer 
3 1 2 


EN Rl f 10:31 AM 


هناك قائمة بها عدة اختيارات ويمكنك اختيار اكثر من عنصر وتحتوى على 


1- اول خاصية هى ال عصه" 
2- تانى خاصية هى ال عںuاa‏ 
3 ثالث خاصية ھی ال S17‏ 
هى عبارة عن الاختيارات التى يراها المستخدم دون ان يستخدم شريط 
التمرير Scrollbar‏ 
والكود الخاص بهاو كما يلى : 


<form> 

What 1s your favorit game ?<br> 

<select name="game" multiple s1ze="2'> 
<option value="football">football 
<option value="basketball'">basketball 
<option value="handball">handball 
</select> 

</form> 


ويظهر فى المستعرض كما يلى : 


ويظهر فى المستعرض كما يلى : 


3 GOMAN - Microsoft Inter net Explorer 
File Edit Yiew Favorites Tools Help 


f 3‏ ا 2 î‏ * ك -@ € eh Tl Favorites‏ ک @ ۳ ا 3 Bak‏ ات 


Address Bl D:{0ipag3, html ا“‎ Go Links * 
@ - satu. [Al F> @@- W-@ @-_ 7 

YW > اا‎ Bookmarks” FÎ Settings ” | Ê Get IE now! 2 Messenger 7 2 Mail ” 2 
I e Ada Tab | 


What i E favorit game 


football 
basketball ا‎ 


3| Done 8 My Computer 
EN Rl dh Di31 AM 


text area box عنصر |آ—‎ 


هو مكان للكتابة ولكن فى عدة اسطر الكزد الخاص به هو 
<form>‏ 


Enter your comment :<textarea></textarea> 
</form> 


ويظهر فى المستعرض كما يلى : 


ويظهر فى المستعرض كما يلى : 


Ê GOMAN - Microsoft Inter net Explorer 
File Edit Yiew Favorites Tools Help 
Ba 3 ا‎ 2 2 Search f Favorites ا‎ @- * I ا‎ 4 3 
أ‎ E Links 
3 


Address (#] Dı1otpag3. html 
ر‎ MEET ETTTCE 
2 1 [Rp Bookmarks FT settings ” | & Get Eê now! &) Messenger ÊZ] mal > د‎ 


My Cornputer‏ ا 


EN Sl. IDs AM 


3| Gone 


ar < @r., 
Submit HÉ 
هو المسئول عن ادخال البيانات الى ال إعرإم؟ ویكتب الامر كما يلى‎ 


< "FORM ACTION= " mailto:someone @domain.com " method ="post"> 


<INPUT TYPE=” SUBMIT” > 


Password 4Ë 


هو مكان للكتابه ولكن الكتابه تظهر على هيئة نجوم او نقط ويكتب الكود كما 
يلى : 


Password <BR> 

<FORM ACTION= " mailto:someone @domain.com " method ="post" > 
<INPUT TYPE = " Password "> 

| </FORM> 


Reset 
عندما يقوم المستخدم عند كتابة او ادخال بيانات خطاء ويريد الغاء هذة‎ 
البيانات فيستخدم هذا الزرار وبالتالى تكون الفور خاليه تماما ويكتب الامر‎ 
` کھا بل‎ 
Password <BR> 
<FORM ACTION= " mailto:someone @domain.com " method ="post " > 
<INPUT TYPE = " Reset "> 
</FORM> 


Button 
لحمل رار دال ااه كتيب الگرد الفا‎ 
Password <BR> 
<FORM ACTION= " mailto:someone @domain.com " method ="post" > 


<INPUT TYPE = " Button "> 
_ <IEORM> 


الخد له رت العالة 


لمراسلتی ... يمكنكم مراسلات الميل التا 


Nany21egs @ hotmail.com 


